

// 功能
class Magnifier{
    constructor(){
        this.sBox = document.querySelector(".midle_box");
        this.sSpan = document.querySelector(".midle_box span");
        this.bBox = document.querySelector(".big_box");
        this.bImg = document.querySelector(".big_box img");
        this.addEvent();
    }
    move(ops){
        let l = ops.x - this.sSpan.offsetWidth/2;
        let t = ops.y - this.sSpan.offsetHeight/2;
        if(l < 0) l = 0;
        if(t < 0) t = 0;
        if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
            l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
        }
        if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
            t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
        }
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";
        const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
    init(){
        this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    addEvent(){
        const that = this;
        this.sBox.onmouseenter = function(){
            that.show();
        }
        this.sBox.onmouseleave = function(){
            that.hide();
        }
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            const pos = {
                x:e.offsetX,
                y:e.offsetY
            };
            that.move(pos);
        }
    }
    show(){
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";
        this.init();
    }
    hide(){
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
}



 //商品详情
//从商品列表页获取导数据在详情页渲染
// console.log(location.search);
const id = location.search.split("=")[1];
console.log(id);

// // 方法一：获取所有商品数据，前端筛选（不推荐）
// // 方法二：根据id请求后端接口，直接获取指定数据（后端筛选）（推荐）

ajax({
    url: "http://localhost:3000/api",
    data: {
        type: "getGoods1"
    },
    success: res => {
        // 后端的obj->ajax的succes-res 数据解析
        // console.log(res);
        res = JSON.parse(res).msg;
        let i = 0;
        // 比对id
        res.some((val, idx) => {
                i = idx;
                return val.proId === id;
                
            })
            console.log(res[i]);
            const mbox = document.querySelector(".midle_box");
        let lstr = "";
          lstr +=` 
          <img src="${res[i].img}" alt="">
          <span></span>
          <em></em>   `;
        mbox.innerHTML=lstr;
        const sbox =document.querySelector(".smail")
        let sstr = "";
          res[i].imgs.forEach(val => {
            sstr += `<li><img src="${val}" alt=""></li>`;
            sbox.innerHTML=sstr;
        });     
        const Bbox=document.querySelector(".big_box");
        let Bstr=` <img src="${res[i].img}" alt="">`
        Bbox.innerHTML=Bstr;
        
     
       const ohp = document.querySelector(".hgroup")
       let nstr=`<span class="proName">${res[i].proName}</span>`
       ohp.innerHTML=nstr;

       const oqgj=document.querySelector(".qgj") 
       let qstr=`<p class="price">￥${res[i].price}</p>
       <span style="text-decoration: line-through;">${res[i].price1}</span>
       <span>`
       oqgj.innerHTML=qstr;
        console.log(document.querySelectorAll(".smail li"));
        new Magnifier();
        new Tab({
            imgs:document.querySelectorAll(".smail li"),
            simg:document.querySelector(".midle_box img"),
            bimg:res[i].imgs
        });
    }
 
})


//点击购物车，对应商品的id及详细信息存储到本地
// const oIp=document.querySelector(".gwc-2");
// oIp.onclick=function(){

// }

// const id = location.search.split("=")[1];
// console.log(id);
        

   




//商品简介  页面
class Splist{
    constructor(){
        this.url = "http://localhost:3000/api";
        this.spbox= document.querySelector(".spjj-box")
        this.load();
    }
    load(){
        ajax({
            url:this.url,
            data:{
                type:"getGoods2"
            },
            success:res=>{
                // console.log(res.msg);
                this.res=JSON.parse(res).msg;
                // console.log(this.res);
                this.ranner();
            }
        })
    }
    ranner(){
        let str = "";
        this.res.forEach(val=>{
            str +=` <li><img src="${val.img}" alt=""></li>`
        })
        this.spbox.innerHTML = str;
    }
}
new Splist();



// 点击小图切换中图和大图
function Tab(ops){
    console.log(ops);
    this.li = ops.imgs;
    this.sImg = ops.simg;
    this.bImg = document.querySelector(".big_box img");
    this.data = ops.bimg;
    this.index = 0;
    this.addEvent();
}
Tab.prototype.addEvent = function(){
    const that = this;
    console.log(5);
    for(let i=0;i<this.li.length;i++){
        this.li[i].xuhao = i;
        this.li[i].onclick = function(){
            that.hide();
            that.getIndex(this);
        }
    }
}
Tab.prototype.hide = function(){
    this.li[this.index].className = "";
}
Tab.prototype.getIndex = function(now){
    this.index = now.xuhao;
    this.show();
}
Tab.prototype.show = function(){
    this.li[this.index].className = "active";
    this.sImg.src = this.data[this.index];
    this.bImg.src = this.data[this.index];
}
// new Tab();




